<script setup>
import { ref, computed, shallowRef, onMounted } from 'vue'
import QuestionType from './PsychologyTestType.vue'
import TestSet from './PsychologyTestSet.vue'
import UserScore from './PsychologyTestUserScore.vue'
import TestQuestion from './PsychologyTestQuestion.vue'

// 直接获取localStorage中的用户信息
const getRole = () => {
  const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
  return userInfo.role || ''
}

// 使用计算属性确保响应式
const role = computed(() => getRole())
const activeTab = ref('test-set') // 默认显示非admin的选项卡

// 动态计算可用选项卡
const availableTabs = computed(() => {
  const tabs = [
    { label: '测评试卷', name: 'test-set' },
    { label: '用户测评记录', name: 'user-score' },
    { label: '测试题目', name: 'test-question' } // 新增的测试题目选项
  ]

  if (role.value === 'admin' || true) {
    tabs.unshift({ label: '题目类型', name: 'question-type' })
  }

  return tabs
})

const components = {
  'question-type': shallowRef(QuestionType),
  'test-set': shallowRef(TestSet),
  'user-score': shallowRef(UserScore),
  'test-question': shallowRef(TestQuestion) // 新增的测试题目组件
}

const currentComponent = computed(() => components[activeTab.value].value)

const handleTabClick = (tab) => {
  // 权限二次验证
  if (tab.props.name === 'question-type' && role.value !== 'admin') {
    activeTab.value = 'test-set'
    return
  }
  activeTab.value = tab.props.name
}

// 初始化时设置默认选项卡
onMounted(() => {
  if (role.value === 'admin') {
    activeTab.value = 'question-type'
  }
})
</script>

<template>
  <div class="psychology-container">
    <!-- 顶部选项卡 -->
    <div class="tabs-container">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane
          v-for="tab in availableTabs"
          :key="tab.name"
          :label="tab.label"
          :name="tab.name"
        ></el-tab-pane>
      </el-tabs>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <component :is="currentComponent" />
    </div>
  </div>
</template>
